<template>
	<!-- 	防排水页面 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">水泵运行数据</text></view>
				</template>
				<up-subsection
					:list="['1#水泵', '2#水泵', '3#水泵']"
					:current="current"
					mode="subsection"
					@change="
						(i) => {
							current = i;
							fn1();
						}
					"
				/>
				<my-grid class="m-t-10" :list="list" :col="2" />
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">管道实时流量指针</text></view>
				</template>
				<!-- <my-grid :list="list2" :col="2" decimals="2" /> -->

				<up-subsection
					:list="['管路1', '管路2']"
					:current="current2"
					mode="subsection"
					@change="
						(i) => {
							current2 = i;
							fn2();
						}
					"
				/>
				<view class="charts-box m-t-10">
					<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">水仓运行状态</text></view>
				</template>
				<my-grid :list="list3.slice(0, 1)" :col="1" />
				<my-grid class="m-t-5" :list="list3.slice(1)" :col="2" />
			</u-collapse-item>

			<u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">近30天排水趋势</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" ontouch :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="5">
				<template #title>
					<view class="content-item-title"><text class="title-txt">集水池监测</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" ontouch :opts="opts1" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
/**************************************请求数据逻辑*************************************************/
import { getApiFabric, getByApiCode } from '@/api/customApi';
const showMoreKeys = ref([1, 2, 3, 4, 5]),
	collapse = ref(null);

/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/*******************************************水泵运行数据******************************************/
const list = ref([
		{
			key: '水泵运行反馈',
			title: '水泵运行',
			value: '未运行'
		},
		{
			key: '水泵故障报警',
			title: '水泵故障报警',
			value: '无报警'
		},
		{
			key: '运行模式',
			title: '运行模式',
			value: ''
		},
		{
			key: '集控模式',
			title: '集控模式',
			value: ''
		},
		{
			key: '水泵电流',
			title: '水泵电流',
			value: '0.0 A'
		},
		{
			key: '水泵电压',
			title: '水泵电压',
			value: '0.0 V'
		},
		{
			key: '水泵管路压力',
			title: '水泵管路压力',
			value: '0.0 MPa'
		},
		{
			key: '阀门开度',
			title: '阀门开度',
			value: '0.0 %'
		}
	]),
	current = ref(0);

function fn1() {
	getApiFabric({
		apiCode: '6862bf58-9f09-4c2d-9893-df564ddf5384',
		params: [
			{
				code: 'deviceKeies',
				value: ['STM-FPS-1-SB', 'STM-FPS-2-SB', 'STM-FPS-3-SB'][current.value]
			}
		],
		propertyMapping: {
			key: 'name',
			val: 'value'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list.value.forEach((item) => {
			item.value = data[item.key];
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

/******************************************************管道实时流量******************************************/
const opts = ref({
		color: ['#165DFF'],
		fontSize: 10,
		title: {
			name: '',
			fontSize: 18,
			color: '#333333',
			offsetY: 60
		},
		subtitle: {
			name: '',
			fontSize: 15,
			color: '#666666'
		},
		extra: {
			gauge: {
				type: 'default',
				labelOffset: 18,
				width: 10,
				labelColor: '#86909C',
				startAngle: 0.75,
				endAngle: 0.25,
				startNumber: 0,
				endNumber: 100,
				labelFormat: '12',
				splitLine: {
					fixRadius: -10,
					splitNumber: 10,
					width: 8,
					color: '#C9CDD4',
					childNumber: 5,
					childWidth: 5
				},
				pointer: {
					width: 12,
					color: '#165DFF'
				}
			}
		}
	}),
	chartData = ref({}),
	current2 = ref(0);

function fn2() {
	const apiCode = ['adee886a-2e7d-4382-9d97-2a266775c38b', '55d30919-6418-45a3-90da-7e7693b002d5'][current2.value];
	getApiFabric({
		apiCode,
		propertyMapping: {
			indicator: 'value'
		}
	}).then((res) => {
		opts.value.title.name = (res.data[0].indicator * 1).toFixed(2) + ' ' + 'm³/H';
		const val = (res.data[0].indicator / 100).toFixed(2);
		chartData.value = {
			categories: [
				{
					value: val,
					color: '#1890ff'
				},
				{
					value: 1,
					color: '#ebeef5'
				}
			],
			series: [
				{
					data: val
				}
			]
		};
	});
}

/******************************************************水仓运行状态******************************************/
const list3 = ref([
	{
		title: '水仓液位',
		value: '0.0 M'
	},
	{
		title: '管路1实时流量',
		value: '0.0 m³/H'
	},
	{
		title: '管路1累计流量',
		value: '0.0 m³'
	},
	{
		title: '管路2实时流量',
		value: '0.0 m³/H'
	},
	{
		title: '管路2累计流量',
		value: '0.0 m³'
	},
	{
		title: '水仓低报警',
		value: '无报警'
	},
	{
		title: '水仓低低报警',
		value: '无报警'
	},
	{
		title: '水仓高报警',
		value: '无报警'
	},
	{
		title: '水仓高高报警',
		value: '无报警'
	}
]);

function fn3() {
	getApiFabric({
		apiCode: '41d07777-87a6-4ab2-b494-f943ac03f602',
		propertyMapping: {
			key: 'name',
			val: 'value'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list3.value.forEach((item) => {
			item.value = data[item.title];
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

/******************************************************近30天排水趋势******************************************/
let chartData1 = ref({}),
	chartData2 = ref({}),
	opts1 = {
		color: ['#3CA272', '#EE6666'],
		padding: [10, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			position: 'top',
			show: true
		},
		xAxis: {
			itemCount: 5
		},
		yAxis: {
			gridType: 'dash',
			showTitle: false,
			data: [
				{
					min: 0,
					title: '个',
					titleOffsetX: -10,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			area: {
				type: 'straight',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

function fn4() {
	chartData1.value = {};
	getByApiCode({
		apiCode: 'JINSANSHITIANPAISHUIQUSHI',
		propertyMapping: {
			x: 'DAY',
			y1: 'GL1SSLL',
			y2: 'GL2SSLL'
		}
	}).then((res) => {
		const groups = res.data.reduce(
			(groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				groups.y2.push(person.y2);
				return groups;
			},
			{
				categories: [],
				y1: [],
				y2: []
			}
		);
		chartData1.value = JSON.parse(
			JSON.stringify({
				categories: groups.categories,
				series: [
					{
						name: '管道1',
						data: groups.y1
					},
					{
						name: '管道2',
						data: groups.y2
					}
				]
			})
		);
	});

	chartData2.value = {};
	getByApiCode({
		apiCode: 'JISHUICHI24XIAOSHIJIANCE',
		propertyMapping: {
			x: 'time',
			y1: 'value'
		}
	}).then((res) => {
		const groups = res.data.reduce(
			(groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				return groups;
			},
			{
				categories: [],
				y1: []
			}
		);

		chartData2.value = JSON.parse(
			JSON.stringify({
				categories: groups.categories,
				series: [
					{
						name: '水位',
						data: groups.y1
					}
				]
			})
		);
	});
}

function getServerData(refresh) {
	Promise.all([fn1(), fn2(), fn3(), fn4()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss">
.video {
	width: 100%;
	height: 200rpx;
}
</style>
